<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
    </style>
</head>
<body>
  

    
    <p>文字</p>
    <p>文字2</p>
    <div>good</div>
    
<script>
// 运行环境
// 运行环境即浏览器( server端有nodejs )
// 下载网页代码,渲染出页面,期间会执行若干JS
// 要保证代码在浏览器中:稳定且高效


// 运行环境
// 网页加载过程
// 性能优化
// 安全

// 题目
// 从输入url到渲染出页面的整个过程
// window.onload和DOMContentLoaded的区别

// 资源的形式
// html代码
// 媒体文件，如图片、视频等
// javascript CSS

// 加载过程，
// DNS解析:域名->IP地址
// 浏览器根据IP地址向服务器发起http请求
// 服务器处理http请求,并返回给浏览器

// 渲染过程- 1
// 根据HTML代码生成DOM Tree
// 根据CSS代码生成CSSOM
// 将DOM Tree和CSSOM整合行程Render Tree

// 渲染过程- 2
// 根据Render Tree渲染页面
// 遇到<script>则暂停渲染,优先加载并执行JS代码,完成再继续
// 直至把Render Tree渲染完成

// 思考
// 为何建议把Css放在head中?
// document. getELementById( 'container').innerHTML = 'update by js'
 
/* <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container">default</div>
    <script src="index.js"></ script>
    <p>text</p>
</body>
</html> */


// 思考
// 为何建议把js放在body最后?


/* <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>test</div>
    <p><img src="./test.png" alt=""></p>
    <div>test</div>
</body>
</html> */

window.addEventListener('load', function () {
//页面的全部资源加载完才会执行，包括图片、视频等
console.log("b");
})
document.addEventListener( 'DOMContentLoaded',function ( ) {
// DOM渲染完即可执行，此时图片、视频还可能没有加载完
console.log("a")
})
// 图片先onload

// 从输入url到显示出页面的整个过程
// 下载资源:各个资源类型，下载过程
// 渲染页面:结合html CSS javascript 图片等


// 性能优化原则
// 多使用内存、缓存或其他方法
// 减少CPU计算量，减少网络加载耗时
// (适用于所有编程的性能优化一空间换时间 )
// chrome 每个标签放在一个新的内存中

// 从何入手
// 让加载更快
// 让渲染更快

// 资源合并 a.js b.js c.js 合并 abc.js 

// 服务端渲染，页面也页面要显示内容一块显示出来。


// 让加载更快
// 减少资源体积:压缩代码
// 减少访问次数:合并代码, SSR服务器端渲染,缓存.
// 使用更快的网络: CDN


// 让渲染更快- 1
// CSS放在head,JS放在body最下面
// 尽早开始执行JS , 用DOMContentLoaded触发
// 懒加载(图片懒加载, .上滑加载更多)

// 让渲染更快- 2
// 对DOM查询进行缓存
// 频繁DOM操作，合并到一起插入DOM结构
// 节流throttle防抖debounce（渲染更加流畅）

// 实例
// 缓存 ：webpack content-hash

// 缓存
// 静态资源加hash后缀,根据文件内容计算hash
// 文件内容不变,则hash不变,则url不变
// url和文件不变,则会自动触发http缓存机制,返回304

// CDN
// <Link href="https :// cdn.bootcss.com/boots trap/4.0.0-alpha.6/ css/bootstrap.css" rel="style/sheet">
// <script src="https://cdn. bootcss.com/ zepto/1.0rc1/zepto. miny js"></ script>

//     SSR
// 服务器端渲染:将网页和数据一起加载, -起渲染
// 非SSR (前后端分离) : 先加载网页,再加载数据，再渲染数据
// 早先的JSP ASP PHP
// 现在的vue React SSR

// 懒加载
// <img id=" img1" src="preview. png" data-src="abc. png"/>
// <script type="text/ j avascript">
// var img1 = document.getELementById( 'img1' )
// img1.src = img1. getAttribute('data-realsrc' )
// </ script>


// 缓存DOM查询
// //不缓存DOM查询结果
// for (let = 0; i < document，getE lementsByTagName('p' ). length; i++) {
// //每次循环，都会计算length ，频繁进行DOM查询
// }
// //缓存DOM查询结果
// const pList = document.getELementsByTagName( 'p')
// const length = pList.length
// for(leti=0;i<length;i++){
// //缓存length ，只进行一次DOM查询

// 多个dom结构合并在一起
// var frag = document.createDocumentFragment;

// 尽早js执行 d
document.addEventListener("DOMContentLoaded",()=>{})

// 防抖debounce
// 监听一个输入框的,文字变化后触发change事件
// 直接用keyup事件,则会频发触发change事件
// 防抖:用户输入结束或暂停时,才会触发change事件

// 节流throttle
// 拖拽一个元素时,要随时拿到该元素被拖拽的位置
// 直接用drag事件,则会频发触发,很容易导致卡顿
// 节流:无论拖拽速度多快,都会每隔100ms触发- -次


</script>
</body>
</html>

 
